import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Select, Pagination ,Message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;


let List = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    let currentPage = this.props.location.state ? this.props.location.state.currentPage : 1;
    return {
      data: [],
      pagination: {
        current: currentPage,
        pageSize: 10
      }
    }
  },

  componentDidMount() {
    this.handleSearch();
  },
  

  fetch() {
    let page = this.state.pagination.current ? this.state.pagination.current : 1;
    let forms = this.props.form.getFieldsValue();
    let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
    let _me = this
    Utils.sendAjax({
      url: '/rent/contract/list',
      data: JSON.stringify(params),
      callback: function (result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  rowKey(data) {
    return data.rentContractId;
  },

  handleModify(record) {
    let params = record;
    params.currentPage = this.state.pagination.currentPage;
    let goPathUrl = '/landlord/rentManage/signUpOrder/update';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },
  handleDetails(record) {
    let params = record;
    params.actionType = 'check';
    params.currentPage = this.state.pagination.currentPage;
    let goPathUrl = '/landlord/rentManage/signUpOrder/details';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },

  handleSearch() {
    this.setState({
      pagination: {
        current: this.state.pagination.current
      }
    })
    this.fetch();
  },

  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  handleReset() {
    this.props.form.resetFields();
  },

  render () {
    const { getFieldProps } = this.props.form;

    const columns = [
      {
        title: '租客姓名',
        dataIndex: 'renterName',
      }, {
        title: '联系电话',
        dataIndex: 'renterPhone',
      }, {
        title: '租期开始日期',
        dataIndex: 'startTime',
      }, {
        title: '押金期数',
        dataIndex: 'depositPeriod',
      }, {
        title: '租期结束日期',
        dataIndex: 'endTime',
      }, {
        title: '租金',
        dataIndex: 'rent',
      }, {
        title: '租金期数',
        dataIndex: 'rentPeriod',
      }, {
        title: '房源地址',
        dataIndex: 'address',
      },{
        title: '房间名称',
        dataIndex: 'roomNames',
        render: (text, record) => {
          let arry = [];
          record.roomNames.forEach((item, index) => {
            let content = (<span className="text-ellipsis" title={item} >{item}</span>);
            if( index+1 <= record.roomNames.length && index > 0 ){
              arry.push(<span className="ant-divider"/>);
            }
            arry.push(content);
          }) 
          return arry;
        }
      },{
        title: '签约状态',
        render: (text, record) => {
          let obj = {
            '1': '租赁中',
            '-2': '已退租',
          }
          return (
            <span>
              {obj[record.status]}
            </span>
          )
        }
      },
      {
        title: '操作',
        render: (text, record) =>(
          <span>
            {record.status == 1 ? <span><a href="javascript:;" onClick={this.handleModify.bind(this, record)}>修改</a>&nbsp;|&nbsp;</span> : '' }
            <a href="javascript:;" onClick={this.handleDetails.bind(this, record)}>查看</a>
        </span>
        )
      }];

    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem label="租客姓名">
              <Input {...getFieldProps('renterName') } placeholder="租客姓名"/>
            </FormItem>
             <FormItem  label="联系电话">
              <Input {...getFieldProps('renterPhone') } placeholder="联系电话"/>
            </FormItem>
            <FormItem label="签约状态">
              <Select  {...getFieldProps('status', {initialValue:''}) } style={{width: 180}}>
                <Option value="">全部</Option>
                <Option value="1">租赁中</Option>
                <Option value="-2">已退租</Option>

              </Select>
            </FormItem>
            <FormItem label="房源地址">
              <Input {...getFieldProps('address') } placeholder="房源地址"/>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="default" onClick={this.handleReset} >重置</Button>
            </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
               onChange={this.handleTableChange}
               pagination={this.state.pagination}/>
      </div>


    );
  }
});

List = Form.create()(List);
export default List